<template>
  <div class="track-management">
    <div class="header">
      <h2>培训跟踪管理</h2>
      <div class="header-actions">
        <el-select v-model="currentTraining" placeholder="选择培训课程" @change="handleTrainingChange">
          <el-option
            v-for="item in trainingList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="exportProgress">导出进度报表</el-button>
      </div>
    </div>

    <!-- 培训进度总览 -->
    <el-card class="progress-overview">
      <template #header>
        <div class="card-header">
          <span>培训进度总览</span>
          <el-button type="primary" @click="batchUpdateStatus">批量更新状态</el-button>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">总参训人数</div>
            <div class="stat-value">{{ statistics.total }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">未开始</div>
            <div class="stat-value">{{ statistics.notStarted }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">进行中</div>
            <div class="stat-value">{{ statistics.inProgress }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">已完成</div>
            <div class="stat-value">{{ statistics.completed }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 培训跟踪列表 -->
    <el-table 
      :data="trainingProgress" 
      border 
      style="margin-top: 20px"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="employeeName" label="员工姓名" />
      <el-table-column prop="department" label="部门" />
      <el-table-column prop="position" label="职位" />
      <el-table-column label="培训状态">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="attendance" label="出勤率" />
      <el-table-column prop="score" label="考核得分" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button 
            size="small" 
            @click="updateProgress(scope.row)">更新进度</el-button>
          <el-button 
            size="small" 
            type="success" 
            @click="showAttendanceDialog(scope.row)">考勤记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 进度更新对话框 -->
    <el-dialog 
      title="更新培训进度" 
      v-model="progressDialogVisible"
      width="500px">
      <el-form :model="progressForm" label-width="100px">
        <el-form-item label="培训状态">
          <el-select v-model="progressForm.status">
            <el-option label="未开始" value="not_started" />
            <el-option label="进行中" value="in_progress" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>
        <el-form-item label="考核得分">
          <el-input-number 
            v-model="progressForm.score" 
            :min="0" 
            :max="100" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input 
            type="textarea" 
            v-model="progressForm.note"
            :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="progressDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProgress">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 考勤记录对话框 -->
    <el-dialog 
      title="考勤记录" 
      v-model="attendanceDialogVisible"
      width="800px">
      <div class="attendance-header">
        <el-date-picker
          v-model="attendanceDate"
          type="date"
          placeholder="选择日期"
          @change="loadAttendanceRecord" />
      </div>
      <el-table :data="attendanceRecords" border>
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="status" label="出勤状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === '出勤' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" />
      </el-table>
      <div class="attendance-summary">
        <p>出勤率：{{ currentAttendanceRate }}%</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TrainingTrackManagement',
  data() {
    return {
      currentTraining: '',
      trainingList: [],
      trainingProgress: [],
      selectedEmployees: [],
      statistics: {
        total: 0,
        notStarted: 0,
        inProgress: 0,
        completed: 0
      },
      progressDialogVisible: false,
      attendanceDialogVisible: false,
      progressForm: {
        status: '',
        score: 0,
        note: ''
      },
      attendanceDate: new Date(),
      attendanceRecords: [],
      currentAttendanceRate: 0,
      currentEmployee: null
    }
  },
  methods: {
    handleTrainingChange(trainingId) {
      this.loadTrainingProgress(trainingId)
    },

    loadTrainingProgress(trainingId) {
      // TODO: 调用API获取培训进度数据
      this.trainingProgress = [
        {
          employeeName: '张三',
          department: '技术部',
          position: '开发工程师',
          status: 'in_progress',
          attendance: '85%',
          score: 90
        }
        // 更多测试数据...
      ]
      this.calculateStatistics()
    },

    getStatusType(status) {
      const types = {
        not_started: 'info',
        in_progress: 'warning',
        completed: 'success'
      }
      return types[status]
    },

    getStatusText(status) {
      const texts = {
        not_started: '未开始',
        in_progress: '进行中',
        completed: '已完成'
      }
      return texts[status]
    },

    handleSelectionChange(selection) {
      this.selectedEmployees = selection
    },

    updateProgress(employee) {
      this.currentEmployee = employee
      this.progressForm = {
        status: employee.status,
        score: employee.score || 0,
        note: ''
      }
      this.progressDialogVisible = true
    },

    submitProgress() {
      // TODO: 调用API提交进度更新
      this.$message.success('进度更新成功')
      this.progressDialogVisible = false
      this.loadTrainingProgress(this.currentTraining)
    },

    showAttendanceDialog(employee) {
      this.currentEmployee = employee
      this.attendanceDialogVisible = true
      this.loadAttendanceRecord()
    },

    loadAttendanceRecord() {
      // TODO: 调用API获取考勤记录
      this.attendanceRecords = [
        {
          date: '2024-03-20',
          status: '出勤',
          note: '准时参加'
        }
        // 更多测试数据...
      ]
      this.calculateAttendanceRate()
    },

    calculateAttendanceRate() {
      // TODO: 计算实际出勤率
      this.currentAttendanceRate = 85
    },

    calculateStatistics() {
      // TODO: 计算实际统计数据
      this.statistics = {
        total: this.trainingProgress.length,
        notStarted: 2,
        inProgress: 5,
        completed: 3
      }
    },

    batchUpdateStatus() {
      if (this.selectedEmployees.length === 0) {
        this.$message.warning('请选择要更新的员工')
        return
      }
      // TODO: 实现批量更新逻辑
    },

    exportProgress() {
      // TODO: 实现导出功能
      this.$message.success('导出成功')
    }
  },
  created() {
    // TODO: 加载培训课程列表
    this.trainingList = [
      { id: 1, name: '新员工入职培训' },
      { id: 2, name: '安全生产培训' }
    ]
  }
}
</script>

<style scoped>
.track-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.progress-overview {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.stat-label {
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.attendance-header {
  margin-bottom: 20px;
}

.attendance-summary {
  margin-top: 20px;
  text-align: right;
  font-weight: bold;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
